<template>
    <div>
        <div>合同审批</div>
       <div>
        <el-input v-model="input" placeholder="请输入内容" style="width: 93%;"></el-input>
            <el-button type="primary" >搜索</el-button>
       </div>
            

        <div style="background-color: aqua;">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="id" label="审批id" align="center"></el-table-column>
                <el-table-column prop="Applican" label="申请人" align="center"></el-table-column>
                <el-table-column prop="status" label="审批状态" align="center"></el-table-column>
                <el-table-column prop="section" label="部门" align="center"></el-table-column>
                <el-table-column prop="date" label="创建时间" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">同意</el-button>
                        <el-button @click="turnDown(scope.row)" type="text" size="small">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-bottom: 0px;">
            <!-- <el-pagination background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="params.page"
                    :page-sizes="arr"
                    :page-size="params.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
            </el-pagination> -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </div>
    </div>
</template>
<script>
 export default {
    data(){
        return{
            //默认每页几条size page-size，page当前页current-page
            params:{name: '',page:1,size:5},
            //总记录数
            count:10,
            //每页几条
            arr:[1,3,5,7,9,10],
        }
    },
    methods: {
      handleClick(row) {
        this.$message("审批成功")
        this.$notify({
          title: '您有新的消息',
          message: '审批通过',
          position: 'bottom-right'
        });
      },
      turnDown(row){
        this.$message("审批已拒绝")
      },
       //每页条数改变时触发
        handleSizeChange(val){
            //后台发请求，请求多少条
            console.log(`每页${val}条`)
            this.index = val
            this.getLimit()
        },
        //当前页改变时触发
        handleCurrentChange(val){
            //给后台发请求
            console.log(`当前页${val}`)
            this.pagee = val
            this.getLimit()
        },
        getLimit(){
            const data = {
                pagee: this.pagee,
                index: this.index
            }
            console.log("当前第几页："+data.pagee+"，每页显示几条："+data.index)
            getLimit(data).then(res => {
                this.tableData = res.result
                this.newtable = this.tableData
                console.log(res)
            })
        },
    },

    data() {
      return {
        tableData: [{
          id: '2016-05-02',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1518 弄',
        }, {
          id: '2016-05-04',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1517 弄',
        }, {
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        }, {
          id: '2016-05-03',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1516 弄',
        }]
      }
    }
  }
</script>
<style scoped>
</style>